<template>
  <div class="stats-task-chart-wrap">
    <div class="stats-task-chart">
      <div id="product-type-chart" ref="chart"></div>
      <stats-chart-empty v-if="isEmpty && !loading">{{$t('common.base.tip.noData')}}</stats-chart-empty> 
    </div>
  </div>
</template>

<script>
import echarts from 'packages/Echarts';
import _ from 'lodash';
import SampleTooltip from 'packages/SampleTooltip';
import { t } from '@src/locales'
let chart = null;

export default {
  name: 'product-type',
  props: {
    chartData: Object,
    timeStart: String,
    timeEnd: String,
    loading: Boolean,
    chartType: String,
  },
  data(){
    return {
      isEmpty: false
    }
  },
  methods: {
    init(){
      chart = echarts.init(this.$refs.chart);
      
      let ctx = this;
      window.addEventListener('resize', _.debounce(function () {
        ctx.render();
      }, 400));
    },
    render(){
      this.showTable = false;
      chart.clear();
      let productType = this.chartData || {};
      let arr = [];

      for(let name in productType){
        if(productType[name] && productType[name] > 0) arr.push({
          count: productType[name],
          name: name
        });
      }


      if(arr.length == 0){
        this.isEmpty = true;
        return 
      }

      this.isEmpty = false;

      let sum = 0;
      let legend = [];
      let series = [];
      let data = [];

      arr.forEach(item => {
        sum += item.count;
        legend.push(item.name);

        data.push({
          name: item.name,
          value: item.count,
          _origin: {
            name: item.name,
            value: item.count
          }
        })
      })

      series.push({
        name: t('common.base.column.productType'),
        type: 'pie',
        radius : '55%',
        center: ['50%', '55%'],
        label: {
          normal: {
            formatter: "{b}： {c} ({d}%)"
          }
        },
        data: data,
        itemStyle: {
          normal: {label : {show: true}},
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      })
      
      let taskTypeOption = this.getOptions(legend, series, `${t('report.callConsultChart.total')}：${sum}`)
            
      chart.resize();
      chart.setOption(taskTypeOption);
    },
    getOptions(legend, series, title){
      return {
        color: ["#2ec7c9","#ffb980","#5ab1ef","#d87a80","#5f5f6e","#07a2a4","#9a7fd1","#588dd5","#c05050","#f5994e","#59678c","#7eb00a","#749f83"],
        tooltip : {
          trigger: 'item',
          formatter: `{b} <br/> ${t('common.label.count')}: {c} ({d}%)`
        },
        title: {
          show: true,
          subtext: title,
          right: 100,
          top: 5,
          subtextStyle: {
            color: '#666',
            fontSize: 14
          }
        },
        toolbox: {
          right: 40,
          top: 10,
          feature: {
            saveAsImage: {
              name: t('report.taskProductChart.text1'),
            }
          }
        },
        grid: {
          left: 120,
          containLabel: true
        },
        legend: {
          top: 10,
          bottom: 10,
          left: 5,
          orient: 'vertical',
          data: legend,
          type: 'scroll'
        },
        series: series
      }
    }
  },
  mounted(){
    this.init();
  },
  activated(){
    this.render();
  },
  watch: {
    chartData: {
      deep: true,
      handler: function(value, oldValue) {
        // 数据变更时再重载
        for(let k in value){
          if(value[k] !== oldValue[k]) this.render();
        }
      }
    }
  },
  components: {
    [SampleTooltip.name]: SampleTooltip,
  }
}
</script>